<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2,#tbody td{
            text-align: center;
        }
        #wrap1,#faqsList{
            margin:0 auto;
            width: 600px;
        }
        #faqsList tr:nth-child(even){
            background-color: lightgreen;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/template-web.js"></script>
    <script type="text/html" id="studentListTemplate">
        {{each studentList student index}}
        <tr>
            <td>{{student.id}}</td>
            <td><a href="modify.html?id={{student.id}}">{{student.sName}}</a></td>
            <td>{{student.gender}}</td>
            <td>{{student.birthday}}</td>
            <td>{{student.telephone}}</td>
            <td>{{student.email}}</td>
            <td>{{student.classes.cName}}</td>
        </tr>
        {{/each}}
    </script>
    <script type="text/javascript">
        $(function () {
            $.post("../getAll",function(data){
                var studentListhtml = template("studentListTemplate",{studentList:data});
                $("#tbody").html(studentListhtml)
            },"json")
        })
    </script>
</head>
<body>
<div>
    <h2>学员信息列表</h2>
</div>
<div id="wrap2">
    <table id="faqsList">
        <thead>
        <tr style="background-color: cadetblue">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>电话</th>
            <th>E-mail</th>
            <th>班级</th>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>
</body>
</html>